<template>
    <div class="w100_ h100_ flex-column hidden">
        <div class="flex-row-center greycolor pd20">
            <span class="weight pointer mr30" @click="proxy.routerBackMixin()"><< 返回</span>
            <span class="">文件管理 >> 完成文件 >> {{proxy.$route.query.disabled?'详情':`编辑`}}</span>
        </div>
        <div class="flex-column w100_ flex1 hidden">
            <div class="flex-row w100_ pd20-row hidden">
                <div class="form flex2 whitebg radius10 pd10 overflow-y">
                    <div class="flex-row-center mb10">
                        <span class="titleLabel mr20">完成文件</span>
                        <el-form-item prop="boutique" class="form-item-inline">
                            <el-checkbox v-model="obj.data.boutique" :disabled="proxy.$useStore().getUser.flag.indexOf('1')==-1||proxy.$route.query.disabled" :label="obj.data.boutique==1?'精品文件':'非精品文件'" :true-value="1" :false-value="0" size="large" />
                        </el-form-item>
                    </div>
                    <el-form class="flex-row" ref="form" :disabled="proxy.$useStore().getUser.flag.indexOf('1')==-1||proxy.$route.query.disabled" :model="obj.data" label-position="top" label-width="100px">
                        <div class="formleft flex1 mr10">
                            <el-form-item label="文件编号" prop="code" :rules="[formRulesMixin.notNull]" class="item-form-row">
                                <el-input v-model="obj.data.code" :disabled="obj.data.file_id>0" placeholder="请输入文件编号" clearable autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="文件名称" prop="name" :rules="[formRulesMixin.notNull]" class="item-form-row">
                                <el-input v-model="obj.data.name" placeholder="请输入文件名称" clearable autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="办理进度" prop="state" :rules="[formRulesMixin.notNull]" class="item-form-row">
                                <el-select v-model="obj.data.state" placeholder="请选择办理进度" clearable>
                                    <el-option v-for="(item,index) in proxy.$setting.globalData.fileStates" :key="index" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="文件简介" prop="synopsis" :rules="[formRulesMixin.notNull]">
                                <el-input v-if="!proxy.$route.query.disabled" v-model="obj.data.synopsis" type="textarea" placeholder="请输入文件简介" rows="8" clearable autocomplete="off"></el-input>
                                <text v-else class="f14 greycolor">{{ obj.data.synopsis||'暂无' }}</text>
                            </el-form-item>
                            <el-form-item label="关键词" prop="keyword" :rules="[formRulesMixin.notNull]">
                                <el-input v-model="obj.data.keyword" placeholder="请输入关键词" clearable autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="instructions" :rules="[formRulesMixin.notNull]">
                                <div slot="label" class="w100_ flex-row-center ju-between">
                                    <span class="form-label">首长批示</span>
                                    <el-button v-if="!proxy.$route.query.disabled" class="btn linebtn mb10" plain @click="obj.data.instructions.push({msg:'',intime:dayjs().format('YYYY-MM-DD HH:mm:ss')})">增加批示</el-button>
                                </div>
                                <template v-for="(v,i) in obj.data.instructions" :key="i" :rules="[formRulesMixin.notNull]">
                                    <el-form-item :prop="`instructions[${i}].msg`" :rules="[formRulesMixin.notNull]" style="width: 100%;">
                                        <div class="flex-row flex1">
                                            <template v-if="!proxy.$route.query.disabled">
                                                <el-input v-model="obj.data.instructions[i].msg" type="textarea" placeholder="请输入批示内容" clearable autocomplete="off" class="flex1 mb10"></el-input>
                                                <el-button v-if="obj.data.instructions.length>1" type="danger" size="small" plain class="ml10" @click="obj.data.instructions.splice(i,1)">删除</el-button>
                                            </template>
                                            <text v-else class="f14 greycolor">{{ obj.data.instructions[i].msg?`批示${i+1}：${obj.data.instructions[i].msg}`:'暂无' }}</text>
                                        </div>
                                    </el-form-item>
                                </template>
                            </el-form-item>
                            <el-form-item label="督办情况" prop="supervise">
                                <el-input v-model="obj.data.supervise" placeholder="请输入督办情况" clearable autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                        <div class="formright flex1">
                            <el-form-item label="承办单位" prop="dept_name" class="item-form-row">
                                <el-input v-model="obj.data.dept_name" disabled autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="承办人" prop="user_name" class="item-form-row">
                                <el-input v-model="obj.data.user_name" disabled autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="上传时间" prop="codetime" class="item-form-row">
                                <el-input v-model="obj.data.codetime" disabled autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="上传图片" prop="imgs">
                                <UpFile v-model:files="obj.data.imgs" dir="files" :accept="['image/jpeg','image/png']" :isEdit="!proxy.$route.query.disabled"/>
                            </el-form-item>
                            <el-form-item label="上传文件" prop="files">
                                <UpFile v-model:files="obj.data.files" dir="files" :accept="['*']" :isDownload="proxy.$useStore().getUser.flag.indexOf('4')!=-1" :isEdit="!proxy.$route.query.disabled" :maxsize="1024 * 1024 * 1024"/>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div v-if="proxy.$route.query.id>0"  class="line_h"></div>
                <div v-if="proxy.$route.query.id>0"  class="flex1 flex-column pd10">
                    <div class="w100_ flex1 flex-column hidden">
                        <span class="titleLabel mb10">承办进展</span>
                        <div v-if="obj.progress.length>0" id="progress" class="w100_ flex1 overflow-y">
                            <el-timeline>
                                <el-timeline-item v-for="(v, i) in obj.progress" :key="i" color="#356F5D" :timestamp="v.intime">
                                    <span>{{v.msg_simple||''}}</span>
                                </el-timeline-item>
                            </el-timeline>
                            <div v-if="obj.progress[0].shownodata" class="flex1 w100_ flex-center nodatas mb30">-- 到底了 --</div>
                        </div>
                        <div v-else class="flex1 w100_ flex-center nodatas">暂无进展</div>
                    </div>
                    <div class="w100_ flex1 flex-column hidden">
                        <span class="titleLabel mb10 mt10">领导批示</span>
                        <div v-if="obj.instructions.length>0" id="instructions" class="w100_ flex1 overflow-y">
                            <el-timeline>
                                <el-timeline-item v-for="(v, i) in obj.instructions" :key="i" color="#356F5D" hide-timestamp placement="top">
                                    <div class="flex-column">
                                        <span class="f16 mb5"><span class="weight">批示人：</span>{{ v.username }}</span>
                                        <span class="mb10 "><span class="red">批示内容：</span>{{v.msg||''}}</span>
                                        <span class="minicolor">{{ v.intime }}</span>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                            <div v-if="obj.instructions[0].shownodata" class="flex1 w100_ flex-center nodatas mb30">-- 到底了 --</div>
                        </div>
                        <div v-else class="flex1 w100_ flex-center nodatas" style="min-height:100px;">暂无批示</div>
                        <el-form v-if="proxy.$useStore().getUser.dept_name=='局长'" class="mt20" ref="form1" :model="obj.f" label-position="top" label-width="100px">
                            <el-form-item label="批示内容" prop="msg" style="margin-bottom: 0 !important;">
                                <div class="flex-column w100_">
                                    <el-input v-model="obj.f.msg" type="textarea" placeholder="请输入批示内容" clearable autocomplete="off" class="flex1"></el-input>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="w100_ flex-center pd10-column" v-if="!proxy.$route.query.disabled">
                <span class="btn linebtn clear" @click="proxy.routerBackMixin()">取消</span>
                <span class="btn sub" v-if="proxy.$useStore().getUser.flag.indexOf('1')!=-1" @click.prevent="upData">{{proxy.$route.query.id>0?'保存':'保存'}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, computed } from 'vue'
    import UpFile from "@/components/upfile_multiple.vue"
    import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()
    const emit = defineEmits(['init', 'close']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        id: { type: Number, require: true, default: 0 },
    })

    let obj = reactive({
        companys: [],
        data:{
            "file_id": "0",
            "boutique": 0,
            "code": "",
            "name": "",
            "state": "",
            "synopsis": "",
            "keyword": "",
            "company_id": 0,
            "supervise": "",
            "imgs": "",
            "files": "",
            "instructions": [{msg:'',intime:dayjs().format('YYYY-MM-DD HH:mm:ss')}],
            msg: '',//每次修改更新的内容
            msg_simple: ''//每次修改更新的内容(简版)
        },
        local: {},
        progress: [],
        instructions: [],
        f: {
            "file_id": "0",
            "msg": ""  
        }
    })
    let init = async () => {
        obj.companys = await proxy.$setting.getcompanys()
        if(proxy.$route.query.id > 0){
            let o = await get()
            obj.data = { 
                ...obj.data,
                ...o,
                file_id: proxy.$route.query.id,
                instructions: o.instructions?o.instructions:[{msg:'',intime:dayjs().format('YYYY-MM-DD HH:mm:ss')}],
                dept_name: proxy.$route.query.dept_name,
                user_name: proxy.$route.query.user_name,
                codetime: proxy.$route.query.codetime
            }
            obj.local = JSON.parse(JSON.stringify(obj.data))
            obj.f.file_id = proxy.$route.query.id
            
            getInstructions()
            geProgress()
        }
    }
    init()

    let get = () => {
        return new Promise((resolve, reject) => {
            proxy.$ajax({
                url: '/user/file/get',
                data: { file_id: proxy.$route.query.id },
                bfLoading: true
            }).then(d => {
                resolve(d.msg||{})
            }).catch(e => {
                reject({})
            })
        })
    }

    const getInstructions=()=>{
        proxy.$ajax({
            url: '/user/file/instructions/list',
            data: { file_id: proxy.$route.query.id },
            bfLoading: true
        }).then(d => {
            obj.instructions = d.msg.list||[]
            if(obj.instructions.length){
                setTimeout(() => {
                    obj.instructions[0].shownodata = proxy.$util.hasScrolled('instructions')
                }, 0);
            }
        }).catch(e => {
            obj.instructions = []
        })
    }

    const geProgress=()=>{
        proxy.$ajax({
            url: '/user/file/progress',
            data: { file_id: proxy.$route.query.id },
            bfLoading: true
        }).then(d => {
            obj.progress = d.msg.list||[]
            if(obj.progress.length){
                setTimeout(() => {
                    obj.progress[0].shownodata = proxy.$util.hasScrolled('progress')
                }, 0);
            }
        }).catch(e => {
            obj.progress = []
        })
    }

    let upData = async() => {
        if(proxy.$useStore().getUser.dept_name=='局长'){
            subIns()
        }
        proxy.$refs['form'].validate(async(valid) => {
            if (valid) {
                let msg = {msg_simple:'',msg:''}
                if(obj.data.file_id > 0){
                    msg = await proxy.$setting.geteditmsg(proxy,obj.local,obj.data)
                    if(!msg.msg){
                        proxy.elMessageMixin(`保存成功`, 'success')
                        proxy.$refs['form'].resetFields()
                        proxy.routerBackMixin()
                        return
                    }
                }
                proxy.$ajax({
                    url: '/user/file/design',
                    data: {
                        ...obj.data,
                        ...msg,
                        instructions: JSON.stringify(obj.data.instructions),
                        company_id: 0
                    },
                    bfLoading: true
                }).then(data => {
                    if(data.success){
                        proxy.elMessageMixin(`${obj.data.file_id > 0 ? '保存' : '添加'}成功`, 'success')
                        proxy.$refs['form'].resetFields()
                        proxy.routerBackMixin()
                    }else{
                        ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
                    }
                }).catch(() => {})
            } else {
                return false
            }
        })
    }

    const subIns = () => {
        if(!obj.f.msg){
            return
        }
        // 局长批示暂时不用必填
        proxy.$ajax({
            url: '/user/file/instructions/add',
            data: obj.f,
            bfLoading: true
        }).then(data => {
            if(data.success){
                proxy.elMessageMixin(`批示成功`, 'success')
                resovle(true)
                proxy.$refs['form1'].resetFields()
                getInstructions()
            }else{
                resovle(false)
                ElMessage({ message: data.err, type: 'error', duration: 2 * 1000 })
            }
        }).catch(() => {resovle(false)})
    }
</script>

<style scoped>
    .checkboxgroup { display: flex; }
</style>

